<!-- 自定义顶部导航栏-点击事件 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="点击事件" name="1">
            <template v-if="['1', '5'].includes(type)">
                <layout-pane label="事件类型">
                    <el-radio-group v-model="widget.widgetData.eles.customFeature.isBack">
                        <el-radio label="0">默认返回上一层</el-radio>
                        <el-radio label="1">自定义点击事件</el-radio>
                    </el-radio-group>
                </layout-pane>
                <template v-if="widget.widgetData.eles.customFeature.isBack === '1'">
                    <si-click-event v-model:event="widget.widgetData.eles.customFeature" style="margin-top: 10px" />
                </template>
            </template>
            <template v-else>
                <si-click-event v-model:event="widget.widgetData.eles.customFeature" />
            </template>
        </el-collapse-item>
    </el-collapse>

    <template v-if="['2', '4'].includes(type)">
        <el-collapse modelValue="1">
            <el-collapse-item title="搜索框设置" name="1">
                <layout-pane label="关联列表">
                    <el-select v-model="searchBindId" placeholder="请选择列表">
                        <template v-for="(item, index) in searchBindList">
                            <el-option :label="item.label" :value="item.value" />
                        </template>
                    </el-select>
                </layout-pane>

                <el-divider></el-divider>
                <layout-pane label="提示">
                    <el-input v-model="widget.widgetData.eles.customFeature.style['input_placeholder']" placeholder="请输入提示" />
                </layout-pane>
            </el-collapse-item>
        </el-collapse>
    </template>

    <template v-if="['5'].includes(type)">
        <el-collapse modelValue="1">
            <el-collapse-item title="名称设置" name="1">
                <layout-pane label="标题1">
                    <el-input
                        v-model="widget.widgetData.eles.content[0].name"
                        maxlength="4"
                        placeholder="请输入标题"
                        show-word-limit
                        text
                    />
                </layout-pane>
                <si-click-event v-model:event="widget.widgetData.eles.content[0].customFeature" style="margin-top: 10px" />

                <el-divider></el-divider>
                <layout-pane label="标题2">
                    <el-input
                        v-model="widget.widgetData.eles.content[1].name"
                        maxlength="4"
                        placeholder="请输入标题"
                        show-word-limit
                        text
                    />
                </layout-pane>
                <si-click-event v-model:event="widget.widgetData.eles.content[1].customFeature" style="margin-top: 10px" />
            </el-collapse-item>
        </el-collapse>
    </template>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { useEditStore } from '@/store'
import LayoutPane from '@/components/setting-pane/layout-pane'
import { SiClickEvent } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'CustomTopNavClickEvent',
    components: {
        LayoutPane,
        SiClickEvent
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const editStore = useEditStore()

        const widgetList = computed(() => editStore.widgetList)

        const type = computed(() => widget.value.widgetData.eles.customFeature.type)

        // 搜索框关联列表
        const searchBindList = computed(
            () => widgetList.value.filter(item => {
                const bindTypes = ['topic', 'franchisee-list', 'group-buy-list']
                return bindTypes.includes(item.eles.type)
            }).map(item => ({
                label: item.eles.customFeature.name || item.component.title,
                value: item.eles.id
            }))
        )

        // 搜索框绑定ID
        const searchBindId = computed({
            get: () => widget.value.widgetData.eles.customFeature?.searchObject?.id || '',
            set: val => {
                if (val) {
                    const bindWidget = widgetList.value.find(item => item.eles.id === val)
                    if (!!bindWidget) {
                        widget.value.widgetData.eles.customFeature.searchObject = {
                            // ...bindWidget.eles
                            id: bindWidget.eles.id,
                            name: bindWidget.component.title,
                            widgetIdPath: [val],
                            subPageResponse: 'inner-link',
                            subFuntionResponse: 'call',
                            isVessel: true
                        }
                    }
                } else {
                    widget.value.widgetData.eles.customFeature.searchObject = {}
                }
            }
        })

        return {
            widget,
            type,
            searchBindList,
            searchBindId
        }
    }
})
</script>